<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/layout/layout_nav_footer.xhtml">
	<ui:define name="titre">
		<p:graphicImage value="/img/recettes.png" />
	</ui:define>
	<ui:define name="content">
		<h:form id="searchRecipeForm" style="max-width:400px;margin: 0 auto;">
			<fieldset>
			    <legend>Je veux rechercher une recette!</legend>
			    <div style="margin-bottom:15px;">
		    		<p:message for="searchRecipeForm" />
		    	</div>
			    <div class="control-group">
			    	<p:graphicImage styleClass="pull-left" value="#{searchRecipe.imgPreparationDuration}" style="position:relative;top:-10px;margin-right:5px"/>
			    	<h:outputLabel styleClass="control-label pull-left" for="preparationDuration" value="Temps de préparation :"/>
			    	<div class="controls" style="clear:both;">
			      		<p:spinner id="preparationDuration" value="#{searchRecipe.preparationDuration}" required="true" />
			      		<p:message for="preparationDuration" />
				    </div>
			    </div>
			    
			    <div class="control-group">
			    	<div class="controls">
			    		<p:graphicImage styleClass="pull-left" value="#{searchRecipe.imgNbOfPerson}" style="position:relative;top:-10px;margin-right:5px;margin-top:5px"/>
				        <h:outputLabel id="output" value="Nombre de personnes : #{searchRecipe.nbOfPerson}" />  
				       	<h:inputHidden id="nbOfPerson" value="#{searchRecipe.nbOfPerson}" required="true" /> 
				       	<p:slider for="nbOfPerson" display="output" minValue="1" maxValue="10" style="width:200px;margin-top:10px;clear:both" displayTemplate="Nombre de personnes : {value}"/>
				       	<p:message for="nbOfPerson" />
			        </div>
		        </div>
		        
		        <div class="control-group" style="margin-top:15px">
		        	<p:graphicImage styleClass="pull-left" value="#{searchRecipe.imgCookExpertise}" style="position:relative;top:-5px;margin-right:5px"/>
			    	<h:outputLabel styleClass="control-label" for="cookExpertise" value="Niveau de cuisine :" />
			    	<div class="controls" style="clear:both;">
			      		<p:rating id="cookExpertise" value="#{searchRecipe.cookExpertise}" stars="5" cancel="true" required="true" style="margin-top:5px"/>
			      		<p:message for="cookExpertise" /> 
				    </div>
			    </div>
			    
			    <div class="control-group">
			    	<p:graphicImage styleClass="pull-left" value="#{searchRecipe.imgCookType}" style="position:relative;top:-5px;margin-right:5px"/>
			    	<h:outputLabel styleClass="control-label" for="cookType" value="Type de recette :"/>
			    	<div class="controls" style="clear:both">
					    <p:selectOneMenu value="#{searchRecipe.cookType}" id="cookType" required="true">
					    	<f:selectItem itemLabel="--" itemValue="" />
					    	<c:forEach var="ct" items="#{searchRecipe.cookTypes}">
					    		<f:selectItem itemLabel="#{ct}" itemValue="#{ct}" />
					    		<h:outputText value="#{ct}" />
					    	</c:forEach>  
		        		</p:selectOneMenu>
		        		<p:message for="cookType" />
		        	</div>
		        </div>
		        
			    <div class="control-group">
    				<div class="controls">
    					<h:commandButton value="Rechercher des recettes" type="submit" styleClass="btn btn-primary btn-large" action="#{searchRecipe.search}" style="margin-top:10px"/>
    				</div>
    			</div>
			</fieldset>
		</h:form>
	</ui:define>
</ui:composition>